﻿<div class="chart_environment">
    <div id="custom_markup_container">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
            width="820px" height="420px">
            <path d="M 13 407 L 128 407 L 232 39 L 13 39" fill="#6D39C3"></path>
            <path d="M 46 381 L 161 381 L 265 13 L 46 13" opacity="0.5" fill="#6D39C3"></path>
            <path d="M 638 365 L 630 396 L 799 396 L 807 365" fill="#6D39C3"></path>
            <path d="M 609 376 L 601 407 L 770 407 L 778 376" opacity="0.5" fill="#6D39C3"></path>
            <text transform="translate(30,89)"
                style="fill: #FFFFFF; font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif; font-size: 36px; font-weight: bold;">
                <tspan x="0" y="0">Export </tspan>
                <tspan x="0" y="38">Custom</tspan>
                <tspan x="0" y="76">Markup</tspan>
            </text>
            <text transform="translate(32,199)"
                style="opacity: 0.8; fill: #FFFFFF;font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif;font-size: 14px;">
                <tspan x="0" y="0">Export a chart with</tspan>
                <tspan x="0" y="19.2">custom elements</tspan>
            </text>
            <text x="650" y="385"
                style="opacity: 0.8;fill: #FFFFFF;font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif;font-size: 12px;">UNdata (www.data.un.org)</text>
            <path opacity="0.8" d="M 0 0 L 820 0 L 820 420 L 0 420 L 0 0" stroke="#999999" stroke-width="1"
                stroke-linecap="butt" fill="none" stroke-linejoin="miter"></path>
        </svg>
    </div>
    @section ExternalDependencies {
        <script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script>
    }
    @(Html.DevExtreme().Chart()
        .ID("chart")
        .Palette(VizPalette.Violet)
        .CommonSeriesSettings(s => s
            .ArgumentField("State")
            .Type(SeriesType.Bar)
            .BarPadding(0.3)
        )
        .Series(s => {
            s.Add().ValueField("Year1990").Name("1990");
            s.Add().ValueField("Year2000").Name("2000");
            s.Add().ValueField("Year2010").Name("2010");
            s.Add().ValueField("Year2016").Name("2016");
            s.Add().ValueField("Year2017").Name("2017");
        })
        .Legend(l => l
            .VerticalAlignment(VerticalEdge.Bottom)
            .HorizontalAlignment(HorizontalAlignment.Center)
        )
        .Title(t => t
            .Text("Oil Production")
            .Subtitle(s => s.Text("(in millions tonnes)"))
        )
        .DataSource(new[] {
            new { State = "Saudi Arabia", Year1990 = 319.6, Year2000 = 408.4, Year2010 = 407.0, Year2016 = 523.0, Year2017 = 496.6 },
            new { State = "USA", Year1990 = 362.8, Year2000 = 287.9, Year2010 = 270.2, Year2016 = 438.0, Year2017 = 461.4 },
            new { State = "China", Year1990 = 138.3, Year2000 = 163.0, Year2010 = 203.0, Year2016 = 199.7, Year2017 = 191.5 }
        })
    )

</div>
<div class="controls-pane">
    @(Html.DevExtreme().Button()
        .Icon("export")
        .Text("Export")
        .OnClick("exportChart")
        .Type(ButtonType.Default)
        .Width(145)
    )
</div>
<script>
    function exportChart() {
        DevExpress.viz.exportFromMarkup(prepareMarkup(), {
            width: 820,
            height: 420,
            margin: 0,
            format: "png",
            svgToCanvas: function(svg, canvas) {
                var deferred = $.Deferred();

                canvas.getContext('2d')
                    .drawSvg(new XMLSerializer().serializeToString(svg), 0, 0, null, null, {
                    renderCallback: deferred.resolve
                });
                return deferred.promise();
            }
        });
    }

    function prepareMarkup() {
        return '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="820px" height="420px">'
            + $("#custom_markup_container").html()
            + '<g transform="translate(305,12)">'
            + $('#chart').dxChart("instance").svg()
            + '</g>'
            + '</svg>';
    }
</script>
